<template>
   <wsPage title="财务概览">
       <div slot="page_operate">
			<Button type="ghost" ><Icon type="refresh"></Icon><span>{{$t('Permission.refresh')}}</span></Button>
		</div>
        <div class="head">
        <Row >
            <Col span="24">					
                <div class="page-row-col-span" style="background:white;min-height:45px;width:100%;margin:0;line-height:45px;font-size:18px">&nbsp;All Sale 为卖家提供平台服务，将会收取平台交易服务费，详情查看<span style="color:red">《All Sale平台费率表》</span>，商户提现也会收取一定的服务费，详情查看<span style="color:red;">《All Sale平台提现规则》</span>
                </div>  
            </Col>
            <Col span="24">
                <div style="height:200px;display:flex;justify-content:space-between;margin:20px auto 0;">
                    <div style="width:49%;background:white;">
                        <div style="width:100%;height:50px;background:#F3F3F3;line-height:50px;">
                            <span style="padding-left:15px">账户</span>
                        </div>
                        <div style="width:100%;height:auto;position:relative;">
                            <div style="height:50px;align-items:center;display:flex;width:95%;margin:55px auto;justify-content:space-between">
                                <div style="align-items: center;display: flex;width:80%;font-size:18px">账户余额<span style="font-size:30px;padding-left:5%">{{account.symbol}}{{account.totalAccount}}</span></div>
                                <Button type="primary" style="width:70px;height:30px;" @click="getDrawRecord" ><span>提现</span></Button>
                            </div>
                        </div>
                    </div>
                <div style="width:49%;background:white;">
                        <div style="width:100%;height:50px;background:#F3F3F3;line-height:50px;">
                            <span style="padding-left:15px">提现设置</span>
                        </div>
                    <div style="width:100%;height:auto;position:relative;">
                            <div style="height:50px;align-items:center;display:flex;width:95%;margin:55px auto;">
                                <div style="display: flex;width:50%;align-items:center;font-size:18px">收款账户<Button type="ghost" style="width:70px;height:30px;margin-left:8%;" @click="goAccountList"><span >{{account.num}}</span></Button></div>
                            <div style="display: flex;width:50%;align-items:center;font-size:18px">提现密码<Button type="primary" style="width:70px;height:30px;margin-left:8%;" @click="settingPassword"><span >去设置</span></Button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </Col>
            <Col span="24" style="margin-top:20px;">
                <Form :label-width="100" ref="form1" >
                    <wsSmPanel>
                        <div slot="list_operate">
                            <Button @click="goMoreShopAccount">查看更多</Button>
                        </div>
                        <div slot="list_data">
                            <ws-table style="width: 100%" :data="shopAccount.data">
                                <ws-table-column align="center" prop="sn"  label="流水号"></ws-table-column>
                                <ws-table-column align="center"  label="收支类型">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.type==1">收入</span>
                                        <span v-if="scope.row.type==2">支出</span>
                                    </template>
                                </ws-table-column>
                                <ws-table-column align="center" prop="balance"  label="金额"></ws-table-column>
                                <ws-table-column align="center" prop="orderSn" label="订单编号"></ws-table-column>
                                <ws-table-column align="center" prop="createDate" label="创建时间"> </ws-table-column>                              
                            </ws-table>
                        </div>
                    </wsSmPanel>
                </Form>           
            </Col>
            <Col span="24" style="margin-top:20px;">
                <Form :label-width="100" ref="form2" >
                    <wsSmPanel>
                        <div slot="list_operate">
                            <Button @click="goMoreDrawRecord">查看更多</Button>
                        </div>
                        <div slot="list_data">
                            <ws-table style="width: 100%" :data="drawRecord.data">
                                <ws-table-column align="center" prop="sn"  label="流水号"></ws-table-column>
                                <ws-table-column align="center"  label="状态">
                                     <template slot-scope="scope">
                                        <span v-if="scope.row.status==1">申请中</span>
                                        <span v-if="scope.row.status==2">审核完成</span>
                                        <span v-if="scope.row.status==3">完成</span>
                                        <span v-if="scope.row.status==4">审核驳回</span>
                                    </template>
                                </ws-table-column>
                                <ws-table-column align="center" prop="userName"  label="收款人"></ws-table-column>
                                <ws-table-column align="center" prop="accountNumber"  label="收款账户"></ws-table-column>
                                <ws-table-column align="center" prop="money"  label="提现金额"></ws-table-column>
                                <ws-table-column align="center" prop="serviceCharge"  label="服务费"></ws-table-column>
                                <ws-table-column align="center" prop="actualMoney" label="应收"></ws-table-column>
                                <ws-table-column align="center" prop="createDate"  label="申请时间"></ws-table-column>
                                <ws-table-column align="center" prop="memo" label="备注"></ws-table-column>
                                <ws-table-column align="center" width="120" :label="$t('Permission.operating')">
                                    <template slot-scope="scope">
                                        <Button type="text" size="small" @click="seeDetails(scope.row.id)">查看详情</Button>
                                    </template>
                                </ws-table-column>
                            </ws-table>
                        </div>
                    </wsSmPanel>
                </Form>
            </Col>
        </Row>
    </div>
    <!-- 提现弹框 -->
    <wsModal title="提现" v-model="drawRecord.show" :whetherShowCancel="false" :whetherShowOk="false" >
        <div>选择收款账户</div>
        <RadioGroup v-model="drawRecord.id">
            <Radio :label="item.id" v-for="(item,index) in account.accountList" :key="index" style="padding: 20px 10px;">{{item.bankName}} 账号{{item.accountNumber}}</Radio>
        </RadioGroup>
        <div>提现金额</div>
        <div style="padding: 10px 10px;">
            <span>{{account.symbol}}</span>
            <Input v-model="drawRecord.recordAmount" style="width:200px;"/>
            <a href="javascript:;" @click="drawRecordAll">全部提现</a>
        </div>
        <div>可提现{{account.symbol}}{{account.totalAccount}}</div>
        <Button type="success" style="margin-top: 30px;" @click="nextStep">下一步</Button>
    </wsModal>
    <!-- 提现下一步输入密码 -->
    <wsModal title="输入提现密码" v-model="drawRecord.inputPassword" @on-ok="commitData" @on-cancel="cancelCommitData">
        <div>输入提现密码</div>
        <Input type="password" v-model="drawRecord.recordPassword"/>
    </wsModal>
    <!-- 设置提现密码 -->
    <wsModal title="设置提现密码" v-model="settingPsw.show"  @on-ok="recvResult" @on-cancel="cancelResult">
        <!-- 邮箱发送验证码 -->
        <Form ref="modal1" >
            <!-- <FormItem label="输入邮箱" :label-width="100" required>
                <Input v-model="settingPsw.email"  autofocus />
                <a href="javascript:;" @click="sendCode" v-if="settingPsw.showSendCode">{{settingPsw.sendCode}}</a>
                <div v-if="settingPsw.showAlertWord">请检查邮箱里的验证码</div>
            </FormItem>		
            <FormItem label="输入验证码" :label-width="100" required>
                <Input v-model="settingPsw.code"  autofocus />
            </FormItem> -->
            <FormItem label="输入密码" :label-width="100" required>
                <Input type="password" v-model="settingPsw.password"  autofocus />
            </FormItem>
            <!-- <FormItem label="确认密码" :label-width="100" required>
                <Input type="password" v-model="settingPsw.confirmPassword"  autofocus />
            </FormItem>-->
        </Form>
    </wsModal>
    <!-- 重置密码弹框 -->
    <wsModal title="重置提现密码" v-model="reservePassword.show" @on-ok="commitResult" @on-cancel="cancelCommitResult">
        <Form ref="modal2">
            <FormItem label="输入邮箱" :label-width="100" required>
                <Input v-model="reservePassword.email"  autofocus />
                <a href="javascript:;" @click="sendCode" v-if="reservePassword.showSendCode">{{reservePassword.sendCode}}</a>
                <div v-if="reservePassword.showAlertWord">请检查邮箱里的验证码</div>
            </FormItem>	
            <FormItem label="输入验证码" :label-width="100" required>
                <Input v-model="reservePassword.code"  autofocus />
            </FormItem>
            <FormItem label="输入原密码" :label-width="100" required>
                <Input type="password" v-model="reservePassword.password"  autofocus />
            </FormItem>
            <FormItem label="输入新密码" :label-width="100" required>
                <Input type="password" v-model="reservePassword.confirmPassword"  autofocus />
            </FormItem>
        </Form>
    </wsModal>
    <!-- 提现详情弹框 -->
    <wsModal title="提现记录详情" v-model="withDrawDetails.show" :whetherShowCancel="false" :whetherShowOk="false">
        <Row style="text-align:center;line-height:30px;font-size:16px;">
            <Col span="24">收款账户：{{withDrawDetails.data.accountNumber}}</Col>
            <Col span="24">银行：{{withDrawDetails.data.bank}}</Col>
            <Col span="24">提现金额：{{withDrawDetails.data.money}}</Col>
            <Col span="24">服务费：{{withDrawDetails.data.serviceCharge}}</Col>
            <Col span="24">实得金额：{{withDrawDetails.data.actualMoney}}</Col>
            <Col span="24">创建日期：{{withDrawDetails.data.createDate}}</Col>
        </Row>
    </wsModal>
   </wsPage>

</template>

<script>
import Util from '../../../common/util.js';
import Common from '../../../common/common.js';
import { setTimeout, clearTimeout, setInterval, clearInterval } from 'timers';
import md5 from 'js-md5';
export default {
  data() {
    return {
        account:{
            symbol:'', //货币
            totalAccount:'', //账户余额
            withdrawalAmount:'', //可提现金额
        },
        // 店铺资金流水
        shopAccount:{
            data:[],
            page:{
                total: 0, //总条数
                pageNum: 1, //当前页
                pageSize: 10 //每页显示条数
            }
        },
        // 提现记录
        drawRecord:{
            show:false,
            inputPassword:false,
            data:[],
            page:{
                total: 0, //总条数
                pageNum: 1, //当前页
                pageSize: 10 //每页显示条数
            },
            // 提现金额
            recordAmount:'',
            id:'', //账户id
            recordPassword:'', //提现密码
        },
        // 设置提现密码
        settingPsw:{
            show:false,
            email:'', //邮箱
            code:'', //验证码
            password:'', //密码
            confirmPassword:'',//确认密码
            sendCode:'发送验证码',
            showSendCode:true,
            showAlertWord:false
        },
        queryForm: {
            type: '',
            flowType: '',
            searchStartTime: '',
            searchEndTime: ''
        },
        account:{
            accountList:[],
            num:0
        },
        // 重置密码
        reservePassword:{
            show:false,
            email:'', //邮箱
            code:'', //验证码
            password:'', //密码
            confirmPassword:'',//确认密码
            sendCode:'发送验证码',
            showSendCode:true,
            showAlertWord:false
        },
        // 提现详情
        withDrawDetails:{
            show:false,
            data:{}
        }

    }
  },
  computed:{

  },
  mounted(){
      this.init();
  },
  methods:{
      init(){
          this.getShopAmount();
          this.buildShopAccount();
          this.getAccountList();
          this.getAccountList();
          this.getRecordList();
      },
     // 获取商家账户金额
    getShopAmount(){
         this.axios.get('/ws/api/ms/merchant/account').then(response=>{
             let res=response.data;
             console.log(res);
             if(res.meta.code==0){
                 this.account.symbol=res.data.symbol;
                 this.account.totalAccount=res.data.totalAccount;
                 this.account.withdrawalAmount=res.data.withdrawalAmount;
             }
         })
     },
    //  获取店铺资金流水
    buildShopAccount() {
        let pageSize = this.shopAccount.page.pageSize;
        let pageNum = this.shopAccount.page.pageNum;
        const _this = this;
        this.axios.post('/ws/ms/merchantAccountRecords?pageNum=' + pageNum + '&pageSize=3', this.queryForm).then(response => {
            var res = response.data;
            console.log(res);
            var resMeta = res.meta;
            if (0 == resMeta.code) {
                this.shopAccount.data = res.data.list;
				this.shopAccount.page.total = res.data.total;
            } else {
                _this.$Message.warning(resMeta.message);
            }
        });
    },
    // 提现操作
    getDrawRecord(){
        this.drawRecord.show=true;
    },
    // 获取商户收款账户列表
    getAccountList(){
        this.axios.get('/ws/api/ms/receiveMoneyAccountList').then(response=>{
            let res=response.data;
            if(res.meta.code==0){
                this.account.accountList=res.data;
                console.log(res.data);
            }
        })
    },
    // 全部提现
    drawRecordAll(){
        this.drawRecord.recordAmount=this.account.totalAccount;
    },
    //设置提现密码
    settingPassword(){
        this.settingPsw.show=true;
    },

    // 确认保存提交提现密码数据
    recvResult(){       
        // let email=this.settingPsw.email;
        // let code=this.settingPsw.code;
        let password=md5(md5(this.settingPsw.password)+'AllSaleMerchant');
        // let confirmPassword=this.settingPsw.confirmPassword;
        if(Util.vad.isBlank(password)){
            this.$Message.info('请输入密码');
            return;
        }

        

        // if(Util.vad.isBlank(email)) {
        //     this.$Message.info('请输入邮箱');
        //     return;
        // }else if(Util.vad.isBlank(code)){
        //     this.$Message.info('请输入验证码');
        //     return;
        // }
        // else if(Util.vad.isBlank(password)){
        //     this.$Message.info('请输入密码');
        //     return;
        // }
        // else if(Util.vad.isBlank(confirmPassword)){
        //     this.$Message.info('请输入确认密码');
        //     return;
        // }else if(confirmPassword!==password){
        //     this.$Message.info('两次密码输入不一致');
        //     return;
        // }
        
        this.axios.post('/ws/ms/withdraw/record/password',{
            password:password
        }).then(response=>{
            let res=response.data;
            console.log(res);
            if(res.meta.code==0){
                this.settingPsw.show=false;
            }else if(res.meta.code==-1){
                // 已经设置密码
                this.settingPsw.show=false;
                this.reservePassword.show=true;
            }else{
                this.$Message.warning('业务操作失败');
            }
            
        })

    },

    // 重置提现密码
    commitResult(){
        let email=this.reservePassword.email;  //邮箱
        let code=this.reservePassword.code;  //验证码
        let password=md5(md5(this.reservePassword.password)+'AllSaleMerchant');  //原密码
        let confirmPassword=md5(md5(this.reservePassword.confirmPassword)+'AllSaleMerchant');  //新密码
        if(Util.vad.isBlank(email)) {
            this.$Message.info('请输入邮箱');
            return;
        }else if(Util.vad.isBlank(code)){
            this.$Message.info('请输入验证码');
            return;
        }
        else if(Util.vad.isBlank(password)){
            this.$Message.info('请输入原密码');
            return;
        }
        else if(Util.vad.isBlank(confirmPassword)){
            this.$Message.info('请输入新密码密码');
            return;
        }

        this.axios.post('/ws/ms/withdraw/record/validate/code',{
            "code":code
        }).then(response=>{
            let res=response.data;
            if(res.meta.code==0){
                this.confirmPasswordIsTrue();
            }
        })


    },
    // 验证原密码是否正确
    confirmPasswordIsTrue(){
         let password=md5(md5(this.reservePassword.password)+'AllSaleMerchant');  //原密码
         this.axios.post('/ws/ms/withdraw/record/validate/password',{
            "password":password
         }).then(response=>{
            let res=response.data;
            if(res.meta.code==0){
                this.commitNewPassword();
            }
        })
    },

    // 提交新密码
    commitNewPassword(){
        let confirmPassword=md5(md5(this.reservePassword.confirmPassword)+'AllSaleMerchant');  //新密码
        this.axios.post('/ws/ms/withdraw/record/password',{
            password:confirmPassword
        }).then(response=>{
            let res=response.data;
            console.log(res);
            if(res.meta.code==0){
                this.reservePassword.show=false;
            }else{
                this.$Message.warning('业务操作失败');
            }
            
        })
    },



    // 取消重置密码
    cancelCommitResult(){
        this.reservePassword.show=false;
    },


    // 取消保存提交提现密码数据
    cancelResult(){
        this.settingPsw.show=false;
    },

    // 发送验证码
    sendCode(){
        let email=this.reservePassword.email;
        if(Util.vad.isBlank(email)) {
            this.$Message.info('请输入邮箱');
            return;
        }      

        this.axios.get('/ws/ms/withdraw/record/password?email='+email).then(response=>{
            let res=response.data;
            console.log(res);
            if(res.meta.code==0){
                this.$Message.info('发送成功');     
                this.reservePassword.showAlertWord=true;
                this.reservePassword.showSendCode=false;

            }else{  
                this.$Message.warning('发送失败');
            }
        })
    },
   // 获取商户收款账户列表
    getAccountList(){
        this.axios.get('/ws/api/ms/receiveMoneyAccountList').then(response=>{
            let res=response.data;
            if(res.meta.code==0){
                this.account.accountList=res.data;
                this.account.num=res.data.length;
                
            }
        })
    },
    goAccountList(){
        this.$router.push('/overviewAccounts/addAccount');
    },
    // 提现下一步
    nextStep(){
        let drawRecordId=this.drawRecord.id;
        let drawRecordAmount=this.drawRecord.recordAmount;
        if(Util.vad.isBlank(drawRecordId)) {
            this.$Message.info('请选择收款账户');
            return;
        }else if(Util.vad.isBlank(drawRecordAmount)){
            this.$Message.info('请输入提现金额');
            return;
        }else if(drawRecordAmount<=0){
            this.$Message.info('提现金额必须大于0');
            return;
        }
        this.drawRecord.show=false;
        this.drawRecord.inputPassword=true;
    },
    // 输入密码进行提现操作
    commitData(){
        let commitRecordPassword=md5(md5(this.drawRecord.recordPassword)+'AllSaleMerchant');

        if(Util.vad.isBlank(commitRecordPassword)){
            this.$Message.info('输入密码');
            return;
        }

        this.axios.post('/ws/ms/withdraw/record',{
            "paymentAccountId":this.drawRecord.id,
            "money":this.drawRecord.recordAmount,
            "password":commitRecordPassword
        }).then(response=>{
            let res=response.data;
            console.log(res);
            if(res.meta.code==0){
                this.$Message.info('提现申请成功');
                this.drawRecord.inputPassword=false;
                this.getRecordList();
            }else{
                this.$Message.warning(res.meta.message);

            }
        })

        
    },
    // 取消
    cancelCommitData(){
        this.drawRecord.inputPassword=false;
    },
    goMoreShopAccount(){
        this.$router.push('/merchantAccount');
    },

    goMoreDrawRecord(){
        this.$router.push('/drawRecord');
    },

    // 获取提现记录数据
    getRecordList(){
        this.axios.get('/ws/ms/withdraw/record/1?status=&searchStartTime=&searchEndTime=').then(response=>{
            let res=response.data;
            console.log(res);
            if(res.meta.code==0){
                this.drawRecord.data=res.data.list;
            }else{
                this.$Message.warning('获取提现记录失败');
            }
        })
    },
    // 判断能否可以提现
    isWithDraw(){
        this.axios.get('/ws/ms/withdraw/judge?money=100').then(response=>{
            let res=response.data;
            console.log(res);
        })
    },

    // 查看提现详情
    seeDetails(id){
        this.axios.get('/ws/ms/withdraw/record/ms/'+id).then(response=>{
            let res=response.data;
            console.log(res);
            if(res.meta.code==0){
                this.withDrawDetails.show=true;
                this.withDrawDetails.data=res.data;
            }
        })
    }



  }


};
</script>

<style lang="less" scoped>
.size {
  font-size: 18px;
}
.head {
  width: 100%;
  border: 1px solid #ddd;
  height: 45px;
  margin: 0 auto;
  //   line-height: 45px;
}


</style>

